<template>
  <div class="AppealRecord-box h-full">
    <base-page v-bind="baseInfo">
      <template #searchBar>
        <filter-form
          ref="filterForm"
          :elements="elements"
          @submit="submit"
          @reset="reset"
        />
      </template>

      <template #content>
        <div class="table-box">
          <TableNew
            :loading="tableLoading"
            :data="tableData"
            :columns="columns"
            :hide-pagination="true"
            @paginationChange="paginationChange"
          >
            <template #statusOther="scope">
              {{ scope.row.status | statusName }}
            </template>

            <template #action="scope">
              <el-button type="text" @click="detailViewFun(scope.row, 'check')">查看</el-button>

              <el-button
                class="text-green-500 hover:text-green-400"
                :class="{ invisible: scope.row.status !== 0 }"
                type="text"
                @click="dealWithFun(scope.row)"
              >处理</el-button>
            </template>
          </TableNew>
        </div>
      </template>
    </base-page>

    <Drawer
      :title="drawerType === 'edit' ? '修改' : '查看' + drawerTitle"
      :visible.sync="drawerVisible"
      :footer-btns="footerBtns"
      width="40%"
      @cancel="drawerCancel"
    >
      <appeal-details v-if="drawerVisible" ref="appealRecord" :select-info="selectInfo" :type="drawerType" />
    </Drawer>

    <Dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      :footer-btns="dialogFooterBtns"
      @modify="modifyFun"
      @reject="rejectFun"
      @cancel="dialogCancel"
    >
      <el-form>
        <el-form ref="dialogForm" label-width="80px" class="demo-dialogForm">
          <el-form-item label="处理意见:" prop="advice">
            <el-input v-model="dialogForm.advice" type="textarea" :rows="5" placeholder="请输入处理意见" />
          </el-form-item>
        </el-form>
      </el-form>
    </Dialog>
  </div>
</template>

<script>
import { appealHandleHandle, appealHandleList, listYsDepartment, ysAppealRecordGetObj } from '@/api/budgetQuert'
import listMixins from '@/mixins/budgetQuert/listMixins'
import AppealDetails from '@/pages/budgetQuert/appealDetails'
import filterMixins from '@/mixins/budgetQuert/filterMixins'

export default {
  name: 'AppealHandle', // 申诉处理
  components: { AppealDetails },
  filters: {
    statusName(val) {
      let name = ''

      switch (val) {
        case 0:
          name = '待处理'
          break
        case 1:
          name = '已驳回'
          break
        case 2:
          name = '已修正'
          break
      }

      return name
    }
  },
  mixins: [listMixins, filterMixins],
  props: {},
  data() {
    return {
      listInterface: appealHandleList,

      baseInfo: {
        searchBarShow: true
      },

      elements: [
        {
          label: '来源',
          type: 'select',
          options: [
            {
              label: '业务职能-费用类',
              value: 1
            },
            {
              label: '业务职能-资产类',
              value: 5
            },
            {
              label: '管理职能-费用类',
              value: 2
            },
            {
              label: '管理职能-资本类',
              value: 3
            },
            {
              label: '管理职能-业务量配套指标',
              value: 4
            }
          ],
          key: 'source',
          value: ''
        },
        {
          label: '部门',
          type: 'select',
          options: [],
          key: 'deptCode',
          itemValue: 'departmentCode',
          itemLabel: 'departmentName',
          value: ''
        },
        {
          label: '编号',
          type: 'input',
          key: 'num',
          value: ''
        },
        {
          label: '预算科目名称',
          type: 'input',
          key: 'subjectName',
          value: '',
          width: 150
        },
        {
          label: '状态',
          type: 'select',
          options: [
            {
              label: '待处理',
              value: 0
            },
            {
              label: '已驳回',
              value: 1
            },
            {
              label: '已修正',
              value: 2
            }
          ],
          key: 'status',
          value: ''
        }
      ],

      tableData: [],
      columns: [
        {
          title: '来源',
          dataIndex: 'source',
          width: 140
        },
        {
          title: '编号',
          dataIndex: 'num',
          width: 140
        },
        {
          title: '预算科目名称',
          dataIndex: 'subjectName',
          width: 140
        },
        {
          title: '预算科目编码',
          dataIndex: 'subjectCode',
          width: 140
        },
        {
          title: '备注',
          dataIndex: 'memo'
        },
        {
          title: '申诉部门',
          dataIndex: 'deptName',
          width: 140
        },
        {
          title: '申诉人',
          dataIndex: 'appealerName',
          width: 140
        },
        {
          title: '处理人',
          dataIndex: 'handlerName',
          width: 100
        },
        {
          title: '状态',
          dataIndex: 'statusOther',
          type: 'otherTag',
          width: 100
        },
        {
          title: '申诉时间',
          dataIndex: 'appealTime',
          width: 140
        },
        {
          title: '操作',
          dataIndex: 'action',
          type: 'otherTag',
          width: 120,
          fixed: 'left'
        }
      ],

      selectInfo: {},
      drawerType: '',
      drawerVisible: false,
      drawerLoading: false,
      drawerTitle: '申诉记录',
      footerBtns: [
        {
          text: '返回',
          type: 'info',
          trigger: 'cancel'
        }
      ],

      dialogTitle: '申诉处理',
      dialogVisible: false,
      dialogLoading: false,
      dialogFooterBtns: [
        {
          text: '去修正',
          type: 'primary',
          trigger: 'modify'
        },
        {
          text: '驳回',
          type: 'delete',
          trigger: 'reject',
          loading: this.dialogLoading
        }
      ],
      dialogForm: {},
      dialogRow: ''
    }
  },
  mounted() {
    this.filterFun(listYsDepartment, 1)
  },
  methods: {
    detailViewFun(row, type) {
      this.tableLoading = true

      ysAppealRecordGetObj({ id: row.id }).then(res => {
        this.tableLoading = false
        if (res.code === 200) {
          this.drawerType = type
          this.selectInfo = res.data
          this.selectInfo.sourceNum = row.sourceNum
          this.drawerVisible = true
        } else {
          this.$message.error('获取数据失败')
        }
      })
    },

    parameterReconstruction(params) {
      delete params.size
      delete params.num

      return params
    },

    drawerCancel() {
      this.selectInfo = {}
      this.drawerVisible = false
    },

    dealWithFun(row) {
      this.dialogRow = row
      this.dialogForm.id = row.id
      this.dialogVisible = true
    },

    modifyFun() {
      let path = ''
      switch (this.dialogRow.sourceNum) {
        case '1':
          path = '/collection-manage/business-execute'
          break
        case '2':
        case '3':
        case '4':
          path = '/collection-manage/manager-execute'
          break
      }

      this.$router.push({ path, query: this.dialogRow })
    },

    rejectFun() {
      this.dialogLoading = true
      appealHandleHandle(this.dialogForm).then(res => {
        this.dialogLoading = false
        if (res.code === 200) {
          this.getData()
          this.$message.success(res.message)
          this.dialogCancel()
        } else {
          this.$message.error(res.message)
        }
      })
    },

    dialogCancel() {
      this.dialogForm = {}
      this.dialogVisible = false
    }
  }
}
</script>

<style lang="less" scoped>
.table-box {
  height: 100%;
  display: flex;
  flex-direction: column;
  .el-button {
    font-size: 12px;
    padding: 0;
  }
}
</style>
